<template>
<div class="container">
    <img :src="headerImg" class="img-responsive" />
    <div class="btn-group">
        <div class="wx-pay-btn btn-item"
             v-if="dataList.verification === 'NO'&&dataList.status === 'YES'"
             @click="showOverlay('5')">加油五元劵</div>
        <div class="wx-pay-btn btn-item2"
             v-else
             @click="used(dataList.verification)">加油五元劵</div>
        <div class="wx-scan-btn btn-item"
             v-if="dataList.verification_10 === 'NO'&&dataList.status === 'YES'"
             @click="showOverlay('10')">商超十元劵</div>
        <div class="wx-scan-btn btn-item2"
             v-else
             @click="used(dataList.verification_10)">商超十元劵</div>
    </div>
    <div class="fun-list">
        <van-cell-group>
            <van-cell title="报名时间" :value="dataList.create_date" />
            <van-cell title="卡券号码" :value="dataList.credential_code" />
<!--            <van-cell title="使用门店" :value="dataList.store_name" v-if="dataList.status !== ''"/>-->
<!--            <van-cell title="使用时间" :value="dataList.verification_time" v-if="dataList.verification_time !== ''"/>-->
            <van-cell title="使用规则" value="点击查看" @click="showRule"/>
            <van-cell title="常见问题" value="点击查看" @click="questions"/>
        </van-cell-group>
    </div>
    <van-overlay :show="show" @click="show = false">
        <div class="qrcode-item">
            <div id="qrCode" ref="qrCode"></div>
        </div>
    </van-overlay>
</div>
</template>

<script>
import { getByOpenid } from '@/api/yi-qing-fang-kong.js'
import wx from 'weixin-js-sdk'
import QRcode from 'qrcodejs2'
export default {
  name: 'my-card.vue',
  data () {
    return {
      show: false,
      qrName: '',
      credential_code: '',
      status: 'NO',
      headerImg: require('@/assets/images/topimg.jpg'),
      dataList: {
        create_date: '',
        store_name: '',
        verification_time: '',
        credential_code: ''
      }
    }
  },
  mounted () {
    // this.bindQRCode()
    this.init()
  },
  methods: {
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    used (data) {
      if (this.status === 'NO') {
        this.failNotice('您暂未中奖！')
      }
      if (data === 'YES') {
        this.failNotice('此劵已使用！')
      }
    },
    showOverlay (data) {
      this.show = true
      if (data === '5') {
        this.qrName = '加油五元劵'
        this.bindQRCode('5:' + this.credential_code)
      }
      if (data === '10') {
        this.qrName = '商超十元劵'
        this.bindQRCode('10:' + this.credential_code)
      }
    },
    getTime (time = +new Date()) {
      console.log(time)
      var date = new Date(time + 8 * 3600 * 1000) // 增加8小时
      return date.toJSON().substr(0, 19).replace('T', ' ')
    },
    init () {
      getByOpenid({ activity_id: this.getActiveId }).then(ret => {
        if (ret.data.errcode === 0) {
          if (ret.data.data.credential_code) {
            this.credential_code = ret.data.data.credential_code
          }
          this.status = ret.data.data.status
          // --判断是否实名认证授权
          if (ret.data.data.flag == '0') {
            if (ret.data.data.isIn != '') {
              // this.$dialog.alert({
              //   message: ret.data.data.isIn
              // })
              this.$dialog.alert({
                title: '温馨提示',
                message: '您暂未中奖,请继续关注活动!'
              }).then(() => {
                this.$common.wxCallBack(function () {
                  wx.closeWindow()
                })
              })
              return false
            }
          } else if (ret.data.data.flag == '2') {
            // ---报名成功
            this.dataList = ret.data.data
            this.dataList.create_date = this.getTime(this.dataList.create_date)
            this.dataList.verification_time = this.getTime(this.dataList.verification_time)
          } else if (ret.data.data.flag == '1') {
            if (ret.data.data.isIn != '') {
              // this.$dialog.alert({
              //   message: ret.data.data.isIn
              // })
              this.$dialog.alert({
                title: '温馨提示',
                message: '您暂未中奖,请继续关注活动!'
              }).then(() => {
                this.$common.wxCallBack(function () {
                  wx.closeWindow()
                })
              })
              return false
            }
          }
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    },
    bindQRCode (num) {
      this.$refs.qrCode.innerHTML = ''
      console.log('二维码生成时候的随机码', this.randomNum)
      let qrcode = new QRcode('qrCode', {
        width: 200,
        height: 200, // 高度
        text: num, // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: '#000000', // 二维码颜色
        colorLight: '#ffffff' // 二维码背景色
      })
      console.log(qrcode)
    },
    // 使用规则
    showRule () {
      this.$router.push({ path: '/subsidy-swj-rule' })
    },
    // 常见问题
    questions () {
      this.$router.push({ path: '/subsidy-swj-questions' })
    }
  }
}
</script>

<style scoped>
    .container {
        padding: 10px;
    }
    .img-responsive {
        display: inline-block;
        height: auto;
        max-width: 100%;
    }
    .btn-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0 20px 0;
    }
    .btn-group .btn-item {
        width: 48%;
        text-align: center;
        padding: 5px 0;
        color: darkolivegreen;
        border-radius: 5px;
        border: 1px solid darkolivegreen;
        font-size: 14px;
    }
    .btn-group .btn-item2{
        width: 48%;
        text-align: center;
        padding: 5px 0;
        color: #DDDDDD;
        border-radius: 5px;
        border: 1px solid #DDDDDD;
        font-size: 14px;
    }
    .fun-list>>>.van-cell__value {
        font-size: 12px;
    }
    #qrCode{
        text-align: center;
        margin: auto;
        border: 10px solid #FFFFFF;
    }
    .qrcode-item{
        margin: auto;
        text-align: center;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        margin-top: 40%;
    }
</style>
